<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
    <style>
        #uname {
            height: 30px;
            border-radius: 5px;
            font-size: 20px;
        }

        #pass {
            margin:10px;
            height: 30px;
            border-radius: 5px;
            font-size: 20px;
        }

        #passagain {
            margin:10px;
            height: 30px;
            border-radius: 3px;
            font-size: 20px;
        }
        a{
             margin:10px;
            font-size: 20px;
        }
        #age{
            margin:10px;
            height: 30px;
            border-radius: 3px;
            font-size: 20px;
        }
        #shengxiao{
             margin:10px;
            height:25px;
            width:40px;
        }
        #sex{
            margin:10px;
        }
        #nicheng{
            margin:10px;
            height: 30px;
            border-radius: 3px;
            font-size: 20px;
        }
        #jiguan{
            margin:10px;
            height: 30px;
            border-radius: 3px;
            font-size: 20px;
        }
        #weight{
            margin:10px;
            height: 30px;
            border-radius: 3px;
            font-size: 20px;
        }
        #shengao{
            margin:10px;
            height: 30px;
            border-radius: 3px;
            font-size: 20px;
        }
    </style>
</head>
<body>
<form>
    姓名：<input type="text" name="uname" id="uname"><br>
    密码：<input type="password" id="pass"><br>
    再次输入密码：<input type="password" id="passagain"><br>
    年龄：<input type="number" id="age"><br>
    昵称：<input type="text" id="nicheng"><br>
    籍贯：<input type="text" id="jiguan"><br>
    身高：<input type="number" id="shengao"><br>
    体重：<input type="number" id="weight"><br>
    生肖：<select name="生肖" id="shengxiao">
        <option value="鼠">鼠</option>
        <option value="牛">牛</option>
        <option value="虎">虎</option>
        <option value="兔">兔</option>
        <option value="龙">龙</option>
        <option value="蛇">蛇</option>
        <option value="马">马</option>
        <option value="羊">羊</option>
        <option value="猴">猴</option>
        <option value="鸡">鸡</option>
        <option value="狗">狗</option>
        <option value="猪">猪</option>
    </select>

</form>
<div id="sex">
    性别:<input type="radio" name="sex" value="男">男
        <input type="radio" name="sex" value="女" checked>女
        <!--单选按钮，name必须相同-->
</div>
<a href="javascript:regist()">确认注册</a><br>

<script>

    var ff = document.forms[0];

    var users = localStorage.getItem('users');
    users && (users = JSON.parse(users));
    /*如果存在该内容，就进行JSON的解析*/
    users || (users = []);//如果不存在该内容，就创建一个空数组

    function regist() {
        var uname = ff.uname.value;
        var pass = document.getElementById('pass').value;
        var passagain = document.getElementById('passagain').value;
         var age = document.getElementById('age').value;
         var nicheng = document.getElementById('nicheng').value;
        var jiguan=document.getElementById('jiguan').value;
        var shengao=document.getElementById('shengao').value;
        var weight=document.getElementById('weight').value;
        var shengxiao=document.getElementById('shengxiao').value;
        //var sex=document.getElementById('sex').value;
        if (pass !== passagain) {
            alert("两次密码输入不一致，请重新输入");
            return;
        }
        if (uname=="" || pass == "") {
            alert("用户名或密码为空，请重新输入");
            return;
        }
        var obj = {
            name: uname,
            pass: pass,
            age:age,
            nicheng:nicheng,
            jiguan:jiguan,
            shengao:shengao,
            weight:weight,
            shengxiao:shengxiao
        }
        users.push(obj);
        /*将新注册的用户添加到用户列表*/
        localStorage.setItem('users', JSON.stringify(users));
        /*将用户列表重新以对象形式写入本地存储*/
        location.href = "homework-login.html";
    }

</script>
</body>
</html>